<template>
	<div>
		<!--头部-->
		<head-top></head-top>			
		<!--banner-->
		<div class="col-sm-12 banner_big_bg">
			<div class="container"  style="position:relative;">
				<div class="col-md-8">
					<p class="home_bg_title">AtomPai —— 让AI触手可及</br>				
					服务高校与企业研发的AI模型库与智能化计算平台</p>
				</div>
				<div  class="col-md-4 home_signup">
					<sign :message="homeMsg"></sign>
	    		</div> 
			</div>
		</div>
		<!--立即开始的部分-->
		<div class="col-sm-12 text-left home_info_one">
			<div class="container">
				<div class="col-sm-8">
					<p class="start_immediately_words">
						AtomPai提供智能化的数据建模、数据分析服务。无需具备数据分析与AI专业背景，你只需要登录AtomPai平台进行几步简单操作，
						即可快速创建最好的分析模型，用于后续的数据分析并生成可视化报告。针对用户的不同需求，我们提供如下服务:
					</p>	
					<p class="start_immediately_words">
						AtomPai.Zero: 通用型数据分析平台。无需专业知识快速完成建模、分析预测等多项任务</br>
						AtomPai.Renova: 针对药物设计的AI模型开发，关于研发合作意向，请<span class="contact_us cursor" @click="contact('#demand')">联系我们</span>	
					</p>
				</div>				
			</div>			
		</div>
		<!--三个介绍的部分-->
		<div class="col-sm-12 home_info_two">
			<div class="container">
				<div class="col-sm-4 text-left">
					<div>
						<img src="../assets/img/home_safe.png" alt="img" />
						<h5 class="words_title">安全</h5>
						<p >全方位数据及计算安全保障</p>
						<p>独立的运行环境</p>
						<p>传输过程进行加密</p>
					</div>
				</div>
				<div class="col-sm-4 text-left index_case_spe">
					<div>	
						<img src="../assets/img/home_idea.png" alt="img" />
						<h5 class="words_title">便捷</h5>
						<p>无需建模知识完成建模</p>
						<p>可视化操作界面</p>
						<p >自动化计算资源调度</p>
					</div>
				</div>
				<div class="col-sm-4 text-left">
					<div>		
						<img src="../assets/img/home_innovation.png" alt="img" />
						<h5 class="words_title">定制（高级用户）</h5>
						<p>支持AI模型定制开发</p>
						<p>支持计算资源定制部署</p>
						<p class="toRenova" @click="contact('#demand')"><a href="javascript:;">联系我们</a></p>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 左右三个介绍部分-->
		<div class="col-sm-12 home_info_three">
			<div class="container">
				<div class="col-sm-7"></div>
				<div class="col-sm-5 text-left">
					<h5 class="words_title_left">数据基本分析</h5>
					<p>
					 	利用表格和可视化的方式简单、直接地展示数据的统计信息及关联性。直接揭示数据之间的内在关系。
					</p>
					<h5 class="words_title_left">智能建模</h5>
					<p>
					 	从数据出发，抛弃艰深的建模知识，把建模的任务完全交给AI，轻松拥抱最佳的预测模型。
					</p>
					<h5 class="words_title_left">数据预测</h5>
					<p>
						任何时候，登陆平台，即可使用之前保存的模型进行数据预测。随时更新你的数据认知，不错过任何变化。
					</p>
				</div>
			</div>
			
		</div>
		<!--提交需求工单-->
		<div class="col-sm-12 home_info_four" id="demand">
			<div class="container">
				<h2 class="text-center">研发合作与定制开发</h2>
				<p class="text-left business_cooperation_title">我们欢迎任何与药物研发、基础科研算法开发、行业相关数据分析相关的合作探讨。
					请在下方留下您的联系方式和需求概述，我们的专业团队将在第一时间与您取得联系。</p>
				<p class="business_cooperation_tip"><img src="../assets/img/star.svg" alt="img" />为必填项 其他为选填</p>
				<div class="business_cooperation_form " style="padding-top:32px!important;">
					<p class="business_cooperation_tip_word text-center" v-show="form_tip" style="margin-bottom:10px!important;">{{submit_tip}}</p>
					<p class="col-sm-6 text-left">
						<label class="business_cooperation_title">电子邮件</label>
						<img src="../assets/img/star.svg" alt="img" />
    					<input type="email" class="business_cooperation_input" placeholder="邮箱" v-model="form_email" @blur="checkMail()">
					</p>
					<p class="col-sm-6 text-left">
						<label class="business_cooperation_title">用户名</label>	
						<img src="../assets/img/star.svg" alt="img" />
	    				<input type="text" class="business_cooperation_input"  placeholder="用户名" v-model="form_username">
					</p>
					<p class="col-sm-6 text-left">
						<label class="business_cooperation_title">职位</label>
						<img src="../assets/img/star.svg" alt="img" />
    					<input type="text" class="business_cooperation_input" placeholder="职位" v-model="form_corporation">
					</p>
					<p class="col-sm-6 text-left">
						<label class="business_cooperation_title">公司</label>
						<img src="../assets/img/star.svg" alt="img" />
	    				<input type="text" class="business_cooperation_input" placeholder="公司" v-model="form_organization">
					</p>
					<p class="col-sm-6 text-left">
						<label class="business_cooperation_title">微信</label>						
	    				<input type="text" class="business_cooperation_input" placeholder="微信" v-model="form_wechat">
					</p>
					<p class="col-sm-6"></p>
					<p class="col-sm-12" style="padding:0 15px!important;">
						<textarea v-model="form_content" class="col-sm-12"></textarea>
					</p>
					<p class="col-sm-12 business_cooperation_submit">
						<span @click="submitDemand()" class="submit_span_home btn">提交</span>
					</p>
				</div>
			</div>
		</div>  
    	<footerHtml></footerHtml>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import sign from '@/components/sign'
	import footerHtml from '@/components/footerHtml'
	import {urlDemand} from '../api/api'
	
	export default {
		data(){  
	    	return {
	        	homeMsg: '免费注册',
	        	form_email:'',
	        	form_username:'',
	        	form_corporation:'',
	        	form_wechat:'',
	        	form_organization:'',
	        	form_content:'',
	        	form_tip:false,
	        	submit_tip:''
	      	}
    	},
	    components:{
	    	headTop,
	    	sign,
	    	footerHtml
	    },
	    methods:{
	    	contact(selector){
	    		let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop = anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
	    	},
	    	checkMail() {	  		
	  			let filter= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if (! filter.test(this.form_email)){
					this.form_tip=true;
					this.submit_tip='抱歉，邮箱格式不正确';
				 	$(".submit_span").attr("disabled", true)
				}else{
					this.form_tip=false;
				 	$(".submit_span").attr("disabled",false)
				}
			},
	    	submitDemand(){	
	    		if(this.form_email=='' || this.form_username=='' 
	    			|| this.form_corporation=='' || this.form_organization==''){
	    			this.form_tip=true;
	    			this.submit_tip='请检查你的必填信息';
	    		}else{	
	    			this.form_tip=false;
		    		let sendData={
		    			email:this.form_email,
		    			username:this.form_username,
		    			corporation:this.form_corporation,
		    			organization:this.form_organization,
		    			wechat:this.form_wechat,
		    			content:this.form_content,
		    		};
		     		urlDemand(sendData).then(response => {
		     			if(response.data.code==200){
		     				this.form_tip=true;
	    					this.submit_tip='发送成功';
		     			}else{
		     				this.form_tip=true;
	    					this.submit_tip='抱歉，发送失败';
		     			}
		           	}).catch(error => {
		            	if(error.response.data.code==401){
		            		localStorage.clear();
		            		this.$router.replace('/login');
						}
		            });
	    		}
	    	}
	    }	    	   
	}
</script>
<style lang="css">
	@import "../assets/css/home.css"
</style>
<style lang="css">
	@import "../assets/css/demand.css"
</style>

